<template>
    <div class="commerce-order-container">
        <div class="item">
            <div class="row1">
                <div class="left"></div>
                <div class="right">

                    <div class="item-top-right" v-if="info?.orderStatus == 1">
                        <div style="display: flex; align-items: center" v-if="new Date().getTime() <=
                        parseInt(info?.submitTime) + 10 * 60 * 1000
                        ">
                            <div style="margin-right: 5px">待支付</div>
                            <nut-countdown :end-time="parseInt(info?.submitTime) + 10 * 60 * 1000"
                                :start-time="new Date().getTime()" style="color: red;font-size: 16px;"
                                @on-end="TimerOver(info)"></nut-countdown>
                        </div>
                        <div v-else>订单超时</div>
                    </div>
                    <!-- <div v-if="info?.orderStatus == 1" class="status">待支付</div> -->
                    <div v-if="info?.orderStatus == 2" class="status">待发货</div>
                    <div v-if="info?.orderStatus == 3" class="status">已发货</div>
                    <div v-if="info?.orderStatus == 4" class="status">已结算</div>
                    <div v-if="info?.orderStatus == 20" class="status">已取消</div>
                </div>

            </div>
            <div class="line"></div>
            <div class="row2">
                <div class="left">
                    <image :src="info?.productImage"
                        style="width: 100%;height: 100%;object-fit:cover;border-radius: 5px;">
                    </image>
                </div>
                <div class="right">
                    <div class="title-price">
                        <div class="title hiddenText">{{ info?.productTitle }}</div>
                        <div class="price">
                            <nut-price :price="info?.realPrice / 100" size="normal" />
                        </div>

                    </div>
                    <div class="count-specials">
                        <div class="specials hiddenText">{{ info?.specialName || '-' }}</div>
                        <div class="count">x 1</div>

                    </div>
                    <div class="servie-box" v-if="info?.productTags > 0 && info?.productTags.length > 0">
                        <div v-if="info?.productTags.indexOf(1) !== -1" class="item">描述不符包退</div>
                        <div v-if="info?.productTags.indexOf(2) !== -1" class="item">二十四小时发货</div>
                        <div v-if="info?.productTags.indexOf(3) !== -1" class="item">四十八小时发货</div>
                        <div v-if="info?.productTags.indexOf(4) !== -1" class="item">假货包赔</div>
                    </div>
                </div>

            </div>
            <div class="row3">
                <div></div>
                <div class="right">
                    <!-- <div class="service1">含退货宝等服务</div> -->
                    <div class="price">
                        <span class="ipt">应付款</span>
                        <span> <nut-price :price="info?.realPriceAll / 100" size="normal" />
                        </span>

                    </div>

                </div>
            </div>
            <div class="line"></div>

            <div class="row4">
                <div class="left"></div>
                <div class="right">
                    <nut-button v-if="info?.orderStatus == 1" size="small"
                        color="linear-gradient(to right, #5232B7,#7237BC)" @click="payOrder"
                        type="primary">立即支付</nut-button>
                    <nut-button v-if="info?.orderStatus == 1" size="small"
                        color="linear-gradient(to right, #5232B7,#7237BC)" style="margin-left: 5px;"
                        @click="cancelOrder" type="primary">取消订单</nut-button>
                    <nut-button v-if="info?.orderStatus == 2 || info?.orderStatus == 3" size="small"
                        color="linear-gradient(to right, #5232B7,#7237BC)" @click="onViewLogistics">查看物流</nut-button>
                    <nut-button v-if="info?.orderStatus == 3" size="small" @click="onRecieve" style="margin-left: 5px;"
                        color="linear-gradient(to right, #5232B7,#7237BC)" type="primary">确认收货</nut-button>
                    <nut-button size="small" @click="onDetail" style="margin-left: 5px;"
                        type="default">查看详情</nut-button>
                </div>
            </div>
        </div>
        <nut-dialog no-cancel-btn title="温馨提示" content="确定要支付当前订单吗" v-model:visible="payFlag">
            <template v-slot:footer>
                <nut-row :gutter="10">
                    <nut-col :span="12">
                        <div class="flex-content">
                            <nut-button type="default" block @click="payFlag = false">取消</nut-button>
                        </div>
                    </nut-col>
                    <nut-col :span="12">
                        <!-- :disabled="!formatPhoneInput()" -->
                        <div class="flex-content flex-content-light">
                            <nut-button type="primary" color="linear-gradient(to right, #5232B7,#7237BC)" block
                                @click="onOkPay">确定</nut-button>
                        </div>
                    </nut-col>
                </nut-row>
            </template>
        </nut-dialog>
    </div>
</template>
<script setup>
import { reactive, toRefs, computed, ref } from "vue";
import { Empty } from "@nutui/nutui-taro";
import Taro from "@tarojs/taro";
import * as orderApi from "../../../../api/order";
import moment from "moment";
const payFlag = ref(false)
const isRequesting = ref(false)
// //格式年月日
// const formatShowTimeYear = computed(() => {
//     return (str) => {
//         var formattedTime = moment.unix(str / 1000).format("YYYY-MM-DD");
//         return formattedTime;
//     };
// });
// // 【格式化】散场时间 时分
// const formatShowTime = computed(() => {
//     return (str) => {
//         var formattedTime = moment.unix(str / 1000).format("HH:mm");
//         return formattedTime;
//     };
// });
// // 【格式化】散场时间
// const TimeFlag = computed(() => {
//     return (str) => {
//         new Date().getTime() <= new Date(str).getTime() + 5 * 60 * 1000;
//     };
// });
const props = defineProps({
    info: Object,
});
//订单倒计时 组件 函数
const TimerOver = (e) => {
    e.orderStatus = -1;
    emit("onUpdated");
};
const emit = defineEmits(["onUpdated"]);
const { info } = toRefs(props);
const onViewLogistics = async () => {
    window.location.href = `https://www.baidu.com/s?word=${info.value.expressNumber}`

}
//取消订单
const cancelOrder = async () => {
    try {
        const { data, message, state } = await orderApi.CancelCommerceOrder({ orderId: info.value.id });
        if (state == 200) {
            Taro.showToast({
                title: "取消成功~",
                icon: "none",
                duration: 2000,
            });
            emit("onUpdated");
        } else {
            Taro.showToast({
                title: message,
                icon: "none",
                duration: 2000,

            });
        }
    }
    catch (error) {
        Taro.showToast({
            title: message,
            icon: "none",
            duration: 2000,

        });

    }
}
const onDetail = async () => {
    Taro.navigateTo({
        url: `/pages/goods-order-detail/index?orderId=${info.value.id}`
    })


}
//确认收货
const onRecieve = async () => {
    try {
        const { data, message, state } = await orderApi.RecieveOrder({ orderId: info.value.id });
        if (state == 200) {
            Taro.showToast({
                title: "收货成功~",
                icon: "none",
                duration: 2000,
            });
            emit("onUpdated");
        } else {
            Taro.showToast({
                title: message,
                icon: "none",
                duration: 2000,

            });
        }
    }
    catch (error) {
        Taro.showToast({
            title: message,
            icon: "none",
            duration: 2000,

        });

    }

}

const onOkPay = async () => {
    if (isRequesting.value) {
        // 如果正在发起请求中，防止重复点击
        return;
    }

    isRequesting.value = true; // 设置为正在发起请求中

    try {
        const result = await orderApi.PayCommerOrder({ orderId: info?.value.id });
        if (result.state === 202) {
            payFlag.value = false
            Taro.showToast({
                title: result.message,
                icon: "none",
                duration: 3000
            });

        } else if (result.state === 200) {
            payFlag.value = false
            emit("onUpdated");

            Taro.showToast({
                title: "支付成功",
                icon: "none",
                duration: 3000
            });


        }

    } finally {
        // 无论请求成功或失败，都重置请求状态，允许下一次点击
        setTimeout(() => {
            isRequesting.value = false;
        }, 1000)
    }
}
// const { data, message, state } = await orderApi.PayOrder({ orderNumber: submitInfo.value.orderNumber })

const payOrder = async () => {
    payFlag.value = true


}

</script>
<style lang="scss">
.commerce-order-container {
    border-radius: 25px;
    padding: 25px;
    box-shadow: 0 0 3px 3px #f6f8f9;
    background-color: #fff;
    font-size: 24px;

    .item {
        .hiddenText {
            display: -webkit-box;
            /* autoprefixer: ignore next */
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        .row3,
        .row1,
        .row2 {
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .row1 {


            .right {
                font-size: 24px;
                color: #5232b7;
            }
        }

        .row2 {
            .right {
                flex: 1;
                margin-left: 20px;

                .title-price {
                    display: flex;
                    align-items: center;
                    // margin-top: 15px;

                    .title {
                        font-size: 27px;
                        font-weight: 500;
                        flex: 1;
                    }

                    .price {
                        margin-left: 10px;
                        max-width: 150px;
                    }
                }

                .count-specials {
                    display: flex;
                    align-items: center;
                    margin-top: 15px;

                    // justify-content: space-between;
                    .count {
                        margin-left: 15px;
                        width: 60px;
                    }

                    .specials {
                        flex: 1;
                    }
                }

                .servie-box {
                    display: flex;
                    align-items: center;
                    margin-top: 15px;

                    .item {
                        color: #5232b7;
                        // font-size: 24px;

                    }

                    .item:nth-child(n+2) {
                        margin-left: 10px;
                    }
                }

            }

            .left {
                width: 110px;
                height: 110px;
            }

        }

        .row3 {
            margin-top: 15px;

            .right {
                display: flex;

                .service1 {}

                .price {
                    .ipt {
                        margin-right: 15px;
                    }
                }

            }
        }

        .row4 {
            display: flex;
            align-items: center;
            justify-content: space-between;

            .right {}
        }

        .line {
            border-bottom: 1px solid #f6f8f9;
            margin: 10px 5px;
        }


    }


}
</style>
